<template>
  <main>
    <ul class="container">
      <li
        v-for="(item, index) in music"
        :key="item.id"
        class="item"
        :class="index % 2 === 0 ? 'even' : 'odd'"
        @click="removeItem(index)"
      >
        <img :src="item.coverImgUrl" class="cover" />
        <p class="title">{{ item.name }}</p>
      </li>
    </ul>
  </main>
</template>

<script>
import { getMusicList } from '../api/getdata'
export default {
  name: 'TheMain',
  data() {
    return {
      music: [],
    }
  },

  

  mounted() {
    this.getMusicData()
    this.$on('music-updated', (music) => {
      this.music = music
      console.log(this.music)
    })
  },

  methods: {
    async getMusicData() {
      try {
        const res = await getMusicList()
        // console.log(res)
        this.music = res.data.playlists
        // console.log(this.music)
      } catch (err) {
        console.log(err)
      }
    },
    removeItem(index) {
      this.music.splice(index, 1)
    },
  },
}
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
}
.item {
  display: flex;
  width: 210px;
  height: 270px;
  padding: 5px;
  padding-block: 13px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
  border-radius: 10px;
}
.container .item .cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.item.even {
  border: 1px solid red;
}
.item.odd {
  border: 1px solid green;
}
</style>
